<template>
  <div>
    <el-card>
      <el-row type="flex" justify="space-between">
        <el-col :span="12" style="display: flex">
          <el-input v-model="postId" placeholder="请输入帖子ID"></el-input>
          <el-button type="danger" @click="deletePost" style="margin-left: 10px;">删除帖子</el-button>
        </el-col>

      </el-row>

      <!-- 删除确认对话框 -->
      <el-dialog
        title="确认删除"
        :visible.sync="dialogPost"
        width="40%"
        top="20%"
        @cancel="dialogPost = false">
        <span>你确定要删除这个帖子吗？</span>
        <!-- 这个是操作  -->
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogPost = false;">取 消</el-button>
          <el-button type="primary" @click="handleDeletePost()">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      postId: '',
      dialogPost: false
    }
  },

  methods: {
    // 展示
    deletePost () {
      this.dialogPost = true
    },

    async handleDeletePost () {
      try {
        const response = await axios.delete(`http://localhost:8080/pixington/content/post/manager/delete/${this.postId}`)
        if (response.data.code === 0) {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.postId = null // 清空搜索结果
          this.dialogPost = false // 隐藏
        } else {
          this.$message({
            message: response.data.msg || '删除失败',
            type: 'error'
          })
        }
      } catch (error) {
        this.$message({
          message: '网络错误，请重试',
          type: 'error'
        })
      } finally {
        this.dialogPost = false // 关闭确认对话框
      }
    }
  }
}
</script>

<style>

</style>
